<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:fragment="common_head(links,scripts)">
    <title>校园竞赛系统</title>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="description">
    <meta content="" name="keywords">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="/css/competition.css">
    <!-- 引入公共的第三方库 -->
    <link href="/libs/bootstrap-fonts/bootstrap-fonts.css" rel="stylesheet"/>
    <link href="/libs/bootstrap5/bootstrap.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="/libs/bootstrap5/bootstrap.min.js"></script>
    <script type="text/javascript" src="/libs/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/libs/toastr/toastr.min.js"></script>
    <!-- 引入公共的样式表和JS -->
    <link href="/styles/common/base.css" rel="stylesheet"/>
    <link href="/styles/common/variable.css" rel="stylesheet"/>
    <link href="/libs/toastr/toastr.min.css" rel="stylesheet"/>
    <link href="/styles/common/mall-common.css" rel="stylesheet"/>
    <!-- 引入界面中自定义的link 和script标签 -->
    <!--    <th:block th:replace="${links}"/>-->
    <!--    <th:block th:replace="${scripts}"/>-->
    <script src="/javascript/common/mall-common.js" type="text/javascript"></script>

    <!-- **********asset*************-->
    <!-- Favicons -->
    <link href="/assets/img/favicon.png" rel="icon">
    <link href="/assets/img/apple-touch-icon.png" rel="apple-touch-icon">
    <!-- Vendor CSS Files -->
    <link href="/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="/assets/vendor/quill/quill.snow.css" rel="stylesheet">
    <link href="/assets/vendor/quill/quill.bubble.css" rel="stylesheet">
    <link href="/assets/vendor/remixicon/remixicon.css" rel="stylesheet">
    <link href="/assets/vendor/simple-datatables/style.css" rel="stylesheet">
    <!-- Template Main CSS File -->
    <link href="/assets/css/style.css" rel="stylesheet">
    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
    <!-- Vendor JS Files -->
    <script src="/assets/vendor/apexcharts/apexcharts.min.js"></script>
    <script src="/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/vendor/chart.js/chart.min.js"></script>
    <script src="/assets/vendor/echarts/echarts.min.js"></script>
    <script src="/assets/vendor/quill/quill.min.js"></script>
    <script src="/assets/vendor/simple-datatables/simple-datatables.js"></script>
    <script src="/assets/vendor/tinymce/tinymce.min.js"></script>
    <script src="/assets/vendor/php-email-form/validate.js"></script>
    <!-- Template Main JS File -->
    <script src="/assets/js/main.js"></script>
</head>
<body>
<div th:fragment="mall-header">
    <header id="header" class="header fixed-top d-flex align-items-center">
        <div class="d-flex align-items-center justify-content-between">
            <a href="/index" class="logo d-flex align-items-center">
                <img src="/assets/img/logo.png" alt="">
                <span class="d-none d-lg-block">校园竞赛平台</span>
            </a>
            <i class="bi bi-list toggle-sidebar-btn"></i>
        </div><!-- End Logo -->
        <div class="search-bar">
            <form class="search-form d-flex align-items-center" th:action="@{/search}" th:if="${session.loggedUser} != null" method="post">
                <input type="text" name="comName" placeholder="请输入赛事名称" title="请输入赛事名称">
                <button type="submit" title="Search"><i class="bi bi-search"></i></button>
            </form>
        </div><!-- End Search Bar -->

        <nav class="header-nav ms-auto">
            <ul class="d-flex align-items-center">

                <li class="nav-item d-block d-lg-none">
                    <a class="nav-link nav-icon search-bar-toggle " href="#">
                        <i class="bi bi-search"></i>
                    </a>
                </li><!-- End Search Icon-->

                <li class="nav-item dropdown">

                    <a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
                        <i class="bi bi-bell"></i>
                        <span class="badge bg-primary badge-number">4</span>
                    </a><!-- End Notification Icon -->

                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow notifications">
                        <li class="dropdown-header">
                            You have 4 new notifications
                            <a href="#"><span class="badge rounded-pill bg-primary p-2 ms-2">View all</span></a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="notification-item">
                            <i class="bi bi-exclamation-circle text-warning"></i>
                            <div>
                                <h4>Lorem Ipsum</h4>
                                <p>Quae dolorem earum veritatis oditseno</p>
                                <p>30 min. ago</p>
                            </div>
                        </li>

                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="notification-item">
                            <i class="bi bi-x-circle text-danger"></i>
                            <div>
                                <h4>Atque rerum nesciunt</h4>
                                <p>Quae dolorem earum veritatis oditseno</p>
                                <p>1 hr. ago</p>
                            </div>
                        </li>

                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="notification-item">
                            <i class="bi bi-check-circle text-success"></i>
                            <div>
                                <h4>Sit rerum fuga</h4>
                                <p>Quae dolorem earum veritatis oditseno</p>
                                <p>2 hrs. ago</p>
                            </div>
                        </li>

                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="notification-item">
                            <i class="bi bi-info-circle text-primary"></i>
                            <div>
                                <h4>Dicta reprehenderit</h4>
                                <p>Quae dolorem earum veritatis oditseno</p>
                                <p>4 hrs. ago</p>
                            </div>
                        </li>

                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li class="dropdown-footer">
                            <a href="#">Show all notifications</a>
                        </li>

                    </ul><!-- End Notification Dropdown Items -->

                </li><!-- End Notification Nav -->

                <li class="nav-item dropdown">

                    <a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
                        <i class="bi bi-chat-left-text"></i>
                        <span class="badge bg-success badge-number">3</span>
                    </a><!-- End Messages Icon -->

                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow messages">
                        <li class="dropdown-header">
                            You have 3 new messages
                            <a href="#"><span class="badge rounded-pill bg-primary p-2 ms-2">View all</span></a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="message-item">
                            <a href="#">
                                <img src="/assets/img/messages-1.jpg" alt="" class="rounded-circle">
                                <div>
                                    <h4>Maria Hudson</h4>
                                    <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                                    <p>4 hrs. ago</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="message-item">
                            <a href="#">
                                <img src="/assets/img/messages-2.jpg" alt="" class="rounded-circle">
                                <div>
                                    <h4>Anna Nelson</h4>
                                    <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                                    <p>6 hrs. ago</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="message-item">
                            <a href="#">
                                <img src="/assets/img/messages-3.jpg" alt="" class="rounded-circle">
                                <div>
                                    <h4>David Muldon</h4>
                                    <p>Velit asperiores et ducimus soluta repudiandae labore officia est ut...</p>
                                    <p>8 hrs. ago</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>

                        <li class="dropdown-footer">
                            <a href="#">Show all messages</a>
                        </li>

                    </ul><!-- End Messages Dropdown Items -->

                </li><!-- End Messages Nav -->

                <li class="nav-item dropdown pe-3"  th:if="${session.USER_INFO} != null">
                    <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
                        <span class="d-none d-md-block dropdown-toggle ps-2">[[${session.USER_INFO.realname}]]</span>
                    </a><!-- End Profile Iamge Icon -->
                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
                        <li class="dropdown-header">
                            <h5>[[${session.USER_INFO.realname}]]</h5>
                            <span>
                              <p th:if="${session.USER_INFO.usertype==0}">赛事组织者</p>
                              <p th:if="${session.USER_INFO.usertype==1}">教师</p>
                              <p th:if="${session.USER_INFO.usertype==2}">学生</p>
                          </span>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center" href="/edge/logout">
                                <i class="bi bi-person"></i>
                                <span>退出登录</span>
                            </a>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                    </ul>
                </li>
                <li class="nav-item d-block d-lg-none">
                    <a class="nav-link nav-icon search-bar-toggle " href="#">
                        <i class="bi bi-search"></i>
                    </a>
                </li>
                <li class="nav-item dropdown" th:if="${session.loggedUser} == null">
                    <a class="nav-link nav-icon" href="/login">
                        <i class="bi bi-person"></i>
                        <span>登录</span>
                    </a>
                </li>
                <li class="nav-item dropdown" th:if="${session.loggedUser} != null">
                    <a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
                        <i class="bi bi-person"></i>
                        <span>[[${session.loggedUser.uname}]]</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow notifications">
                        <li class="notification-item">
                            <i class="bi bi-person text-warning"></i>
                            <div>
                                <a href="/profile">
                                    <h4>个人中心</h4>
                                </a>
                            </div>
                        </li>
                        <hr class="dropdown-divider">
                        <li class="notification-item">
                            <i class="bi bi-box-arrow-right text-danger"></i>
                            <div>
                                <a href="/logout">
                                    <h4>登出</h4>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>

                <a>
                    <span class="d-none d-md-block ps-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </a>
            </ul>
        </nav><!-- End Icons Navigation -->
    </header><!-- End Header -->
</div>
<div th:fragment="competition-sidebar" th:if="${session.loggedUser} != null">
    <aside id="sidebar" class="sidebar">
        <ul class="sidebar-nav" id="sidebar-nav">
            <li class="nav-item">
                <a class="nav-link collapsed" data-bs-target="#components-nav" data-bs-toggle="collapse" href="#">
                    <i class="bi bi-menu-button-wide"></i><span>我的赛事</span><i class="bi bi-chevron-down ms-auto"></i>
                </a>
                <ul id="components-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
                    <li th:if="${session.role == '组织者'}">
                        <a id="create-competition" href="/myCompetition">
                            <i class="bi bi-circle"></i><span>创建赛事</span>
                        </a>
                    </li>
                    <li th:if="${session.role == '组织者'}">
                        <a id="create-match" href="/myMatch">
                            <i class="bi bi-circle"></i><span>筹备比赛</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="nav-item" th:if="${session.role != '组织者'}">
                <a class="nav-link collapsed" data-bs-target="#team-nav" data-bs-toggle="collapse" href="#">
                    <i class="bi bi-people"></i><span>我的团队</span><i class="bi bi-chevron-down ms-auto"></i>
                </a>
                <ul id="team-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
                    <li>
                        <a id="manage-team" href="/team/manage">
                            <i class="bi bi-circle"></i><span>管理团队</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </aside><!-- End Sidebar-->
</div>

<div class="pager-container" th:fragment="common_pager(pageInfo)">
    <div class="page-info">共为您找到[[${pageInfo.total}]]条数据</div>
    <nav class="pager-body">
        <ul class="pagination justify-content-center">
            <li class="page-item" th:onclick="gotoPage([[${pageInfo.prePage}]])" th:if="${pageInfo.hasPreviousPage}">
                <a class="page-link">上一页</a>
            </li>
            <li th:class="${page == pageInfo.pageNum} ? 'page-item active' : 'page-item'"
                th:each="page : ${pageInfo.navigatepageNums}" th:onclick="gotoPage([[${page}]])">
                <a class="page-link">[[${page}]]</a>
            </li>
            <li class="page-item" th:if="${pageInfo.hasNextPage}" th:onclick="gotoPage([[${pageInfo.nextPage}]])">
                <a class="page-link">下一页</a>
            </li>
        </ul>
    </nav>
</div>
<footer id="footer" class="footer" th:fragment="mall-footer">
    <div class="copyright">
        Copyright2024@杭州助你成才计算机信息学院
    </div>
</footer><!-- End Footer -->
<footer id="footerWithoutsidebar" class="footer" th:fragment="mall-footerWithoutsidebar">
    <div class="copyright">
        Copyright2024@杭州助你成才计算机信息学院
    </div>
</footer><!-- End Footer -->
</body>
</html>
